<!--
  Copyright © 2016-2018 Cask Data, Inc.

  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy of
  the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  License for the specific language governing permissions and limitations under
  the License.
-->

<div class="row tracker-content">
  <div class="col-xs-12 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
    <div class="form-group has-feedback tracker-search" ng-keypress="MainController.search($event)">
      <input type="text" class="form-control" placeholder="Search" ng-model="MainController.searchQuery" pattern="^(?![*]).*$"
        cask-focus="searchField">
      <span class="fa fa-search form-control-feedback"></span>
    </div>

    <div class="search-tips">
      <div class="title">
        Search Tips
      </div>
      <div class="subtitle">
        Search datasets by
      </div>

      <div class="search-tips-container">
        <div>
          <strong>The name</strong>
          <span>- Input the dataset name by using the format</span>
          <span class="search-tip-highlight">entity-name:&lt;dataset-name&gt;</span>
          <i>(example: entity-name:userprofiles)</i>
        </div>
        <div>
          <strong>A field in the dataset schema</strong>
          <span>- Input the field name of a schema using the format</span>
          <span class="search-tip-highlight">schema:&lt;field-name&gt;</span>
          <i>(example: schema:zipcode)</i>
        </div>
        <div>
          <strong>A property annotated on the dataset</strong>
          <span>- Input a property as a query, using the format</span>
          <span class="search-tip-highlight">&lt;key&gt;:&lt;value&gt;</span>
          <i>(example: env:production)</i>
        </div>
        <div>
          <strong>A tag annotated on the dataset</strong>
          <span>- Input a name of a tag as a query, using the format</span>
          <span class="search-tip-highlight">tags:&lt;tag-name&gt;</span>
          <i>(example: tags:batch)</i>
        </div>
        <div>
          <strong>Wild card</strong>
          <span>- Append</span>
          <span class="search-tip-highlight">*</span>
          <span> to the end of the search term</span>
          <i>(example: user* or tags:b*)</i>
        </div>
      </div>
    </div>
  </div>
</div>
